<script setup lang="ts">
import { CourseTab } from '@/models/sys'
import CopyIcon from '@/static/images/history/copy-icon.png'
import historyMessageHooks from '@/hooks/historyMessageHooks'
import { CourseModel } from '@/models/historyMessageModels'
import NotData from '@/components/NotData.vue'

const tabs = ref([])
const justLookMe = ref<number>(0)
const { studentCoursesNumModel, ...callback } = historyMessageHooks()
const props = defineProps<{
  studentId: number
  tabPosition: number
  type: number
}>()

const paging = ref()
const listData = ref<CourseModel[]>([])

function onClickLookMe() {
  justLookMe.value === 0 ? (justLookMe.value = 1) : (justLookMe.value = 0)
  refresh()
}

watch(
  () => props.studentId,
  (val) => {
    if (props.studentId !== undefined) {
      refresh()
    }
  },
)

watch(
  () => props.tabPosition,
  (val) => {
    if (props.type === props.tabPosition) {
      refresh()
    }
  },
)

function onClickCopy(value: any) {
  uni.setClipboardData({
    data: value.toString(),
    success: function (res) {
      uni.showToast({
        title: '复制成功',
        icon: 'none',
      })
    },
    fail(result) {
      console.log(result)
    },
  })
}

function refresh() {
  paging.value?.refresh()
}

async function query(page: number, per_page: number) {
  if (props.studentId !== undefined && props.type === props.tabPosition) {
    let listData: CourseModel[]
    if (props.tabPosition === CourseTab.OnlineSchool) {
      listData = await callback.onlineCourses(props.studentId, justLookMe.value, page, per_page)
    } else if (props.tabPosition === CourseTab.School) {
      listData = await callback.offlineCourses(props.studentId, justLookMe.value, page, per_page)
    } else {
      listData = await callback.bookstoreCourses(props.studentId, justLookMe.value, page, per_page)
    }
    paging.value.complete(listData)
  }
}
</script>

<template>
  <view>
    <view class="round-corners mt-3" style="min-height: 30vh; padding-bottom: 30rpx">
      <view class="linear-hor" style="padding: 24rpx" @click="onClickLookMe">
        <view v-if="justLookMe === 1" class="check-icon"></view>
        <view v-else class="not-check-icon"></view>
        <span style="margin-left: 24rpx" />
        <wd-text text="仅看我的课程" color="#2B2F36" size="28rpx" />
      </view>
      <view class="divider" />

      <view class="scroll-views">
        <z-paging
          ref="paging"
          loading-more-no-more-text="没有更多了"
          v-model="listData"
          @query="query"
          :fixed="false"
          :default-page-size="10"
        >
          <template #empty>
            <NotData text="暂无数据"></NotData>
          </template>
          <view v-for="(item, index) in listData" :key="index">
            <view class="round-corners-gray" style="padding: 24rpx; margin: 0 24rpx 24rpx 24rpx">
              <view class="linear-hor">
                <view>
                  <view
                    :class="item.class_form == '全国网课' ? 'tag-green' : 'tag-blue'"
                    v-if="tabPosition == CourseTab.OnlineSchool && item.class_form !== undefined"
                    style="min-width: 110rpx; margin-right: 16rpx"
                  >
                    {{ item.class_form }}
                  </view>
                </view>

                <wd-text
                  :text="item.course_name"
                  size="28rpx"
                  :lines="tabPosition == CourseTab.OnlineSchool ? 1 : 2"
                  color="#2B2F36"
                />
              </view>
              <view class="linear-hor mt-2">
                <wd-text text="课程ID：" color="#6A707C" size="28rpx" />
                <wd-text :text="item.course_id" color="#2B2F36" size="28rpx" />
                <span style="width: 8rpx" />
                <view @click="onClickCopy(item.course_id)">
                  <wd-img :src="CopyIcon" width="48rpx" height="48rpx" />
                </view>

                <span class="spacer" />
                <wd-text text="班级ID：" color="#6A707C" size="28rpx" />
                <wd-text
                  :text="
                    tabPosition == CourseTab.OnlineSchool ? item.course_live_id : item.class_id
                  "
                  color="#2B2F36"
                  size="28rpx"
                />
                <span style="width: 8rpx" />
                <view
                  @click="
                    onClickCopy(
                      tabPosition == CourseTab.OnlineSchool ? item.course_live_id : item.class_id,
                    )
                  "
                >
                  <wd-img :src="CopyIcon" width="48rpx" height="48rpx" />
                </view>
              </view>
              <view class="linear-hor mt-2">
                <wd-text text="主讲老师：" color="#6A707C" size="28rpx" />
                <wd-text :text="item.major_name" color="#2B2F36" size="28rpx" />
                <span class="spacer" />
                <view v-show="tabPosition != CourseTab.Bookstore">
                  <wd-text text="辅导老师：" color="#6A707C" size="28rpx" />
                  <wd-text :text="item.assistant_name" color="#2B2F36" size="28rpx" />
                </view>
              </view>
              <view class="linear-hor mt-2" v-if="tabPosition != CourseTab.Bookstore">
                <wd-text text="校区地址：" color="#6A707C" size="28rpx" />
                <wd-text :text="item.campus_name" color="#2B2F36" size="28rpx" :lines="1" />
              </view>
              <view class="linear-hor mt-2" v-if="tabPosition == CourseTab.Bookstore">
                <wd-text text="书店：" color="#6A707C" size="28rpx" />
                <wd-text :text="item.bookstore_name" color="#2B2F36" size="28rpx" :lines="1" />
              </view>
              <view class="linear-hor mt-2" v-if="tabPosition !== CourseTab.Bookstore">
                <wd-text text="上课时间：" color="#6A707C" size="28rpx" />
                <wd-text
                  :text="`${item.start_time}-${item.end_time}`"
                  color="#2B2F36"
                  size="28rpx"
                />
              </view>
              <view class="linear-hor mt-2" v-if="tabPosition !== CourseTab.Bookstore">
                <wd-text text="日期范围：" color="#6A707C" size="28rpx" />
                <wd-text
                  :text="`${item.start_date}-${item.end_date}`"
                  color="#2B2F36"
                  size="28rpx"
                />
              </view>
              <view class="linear-hor mt-2">
                <wd-text text="报名时间：" color="#6A707C" size="28rpx" />
                <wd-text :text="item.registration_time" color="#2B2F36" size="28rpx" />
              </view>
              <view style="width: 100%; padding: 24rpx 0" class="round-corners mt-3">
                <wd-row :gutter="0">
                  <wd-col :span="8">
                    <view class="linear-vertical">
                      <wd-text
                        :text="`${tabPosition == CourseTab.Bookstore ? item.total_lesson_num : item.student_lesson_num}讲`"
                        color="#2B2F36"
                        size="32rpx"
                        font-500
                      />
                      <wd-text text="购买讲次数" color="#9FA3AA" size="24rpx" class="mt-1" />
                    </view>
                  </wd-col>
                  <wd-col :span="8">
                    <view class="linear-vertical">
                      <wd-text
                        :text="`${item.started_lesson_num}讲`"
                        color="#2B2F36"
                        size="32rpx"
                        font-500
                      />
                      <wd-text text="已开讲次数" color="#9FA3AA" size="24rpx" class="mt-1" />
                    </view>
                  </wd-col>
                  <wd-col :span="8">
                    <view class="linear-vertical">
                      <wd-text
                        :text="`${item.attend_live_lesson_num}讲`"
                        color="#2B2F36"
                        size="32rpx"
                        font-500
                      />
                      <wd-text text="到课讲次数" color="#9FA3AA" size="24rpx" class="mt-1" />
                    </view>
                  </wd-col>
                </wd-row>
              </view>
            </view>
          </view>
        </z-paging>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.tabs-head {
  position: relative;
  display: flex;
  align-items: center;
  height: 88rpx;
  margin-top: 24rpx;
  margin-bottom: 5rpx;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(183, 189, 200, 0.1);

  .tab-view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33vw;
    height: 100%;
    font-family:
      PingFangSC,
      PingFang SC;
    font-size: 28rpx;
    font-weight: 400;
    color: #8a909c;
  }

  .line {
    width: 2rpx;
    height: 40rpx;
    background: #ebedf2;
  }
}

.check-icon {
  width: 40rpx;
  height: 40rpx;
  background: url('@/static/images/history/check-icon.png') no-repeat;
  background-size: 100% 100%;
}

.not-check-icon {
  width: 40rpx;
  height: 40rpx;
  background: url('@/static/images/index/not-check-icon.png') no-repeat;
  background-size: 100% 100%;
}

.linear-hor {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.round-corners-gray {
  background: #f8f9fb;
  border-radius: 16rpx;
}

.round-corners {
  background: white;
  border-radius: 16rpx;
}

.divider {
  width: calc(100% - 64rpx);
  height: 2rpx;
  margin: 0 32rpx 32rpx 32rpx;
  background: #ebedf2;
}

.spacer {
  flex-grow: 1;
}

.linear-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-primary {
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 28rpx !important;
  font-weight: 800 !important;
  color: #2b2f36 !important;
}

.scroll-views {
  height: calc(100vh - 578rpx);
}

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40rpx;
  padding: 0 8rpx;
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 22rpx;
  font-weight: 400;
  color: #2b2f36;
  border-radius: 8rpx;
}

.tag-green {
  @include flex-center;
  background: #eeffe8;
  border: 2rpx solid #87e363;
}

.tag-blue {
  @include flex-center;
  background: #edffff;
  border: 2rpx solid #88dbdd;
}
</style>
